<template>
  <div class="app-container active">
    <header>
      <nav>
        <div class="nav-left">
          <div class="logo">FinanceAI</div>
          <ul class="nav-menu">
            <li><a href="#" class="active">智能问答</a></li>
            <li><a href="#">文档分析</a></li>
            <li><a href="#">数据看板</a></li>
            <li><a href="#">市场监测</a></li>
            <li><a href="#">知识库</a></li>
          </ul>
        </div>
        <div class="nav-right">
          <button class="notification-btn">
            🔔
            <span class="notification-badge">3</span>
          </button>
          <div class="user-menu">
            <div class="user-avatar">A</div>
            <span>Admin</span>
            <span>▼</span>
          </div>
        </div>
      </nav>
    </header>

    <main class="main-container">
      <div class="page-header">
        <h1>系统管理</h1>
        <p>管理系统配置和用户权限</p>
      </div>

      <div class="content-wrapper">
        <!-- Left Sidebar -->
        <aside class="sidebar">
          <div class="sidebar-section">
            <h3 class="sidebar-title">系统管理</h3>
            <a href="#" class="menu-item active">
              <span class="menu-icon">⚙️</span>
              <span>系统配置</span>
            </a>
            <a href="#" class="menu-item">
              <span class="menu-icon">👥</span>
              <span>用户管理</span>
            </a>
            <a href="#" class="menu-item">
              <span class="menu-icon">📊</span>
              <span>系统监控</span>
            </a>
            <a href="#" class="menu-item">
              <span class="menu-icon">🔒</span>
              <span>权限管理</span>
            </a>
            <a href="#" class="menu-item">
              <span class="menu-icon">📝</span>
              <span>日志管理</span>
            </a>
          </div>
        </aside>

        <!-- Main Content -->
        <section class="main-content">
          <!-- System Overview Cards -->
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-header">
                <div>
                  <div class="stat-label">系统状态</div>
                  <div class="stat-value">正常运行</div>
                </div>
                <div class="stat-icon success">✅</div>
              </div>
              <div class="stat-footer">
                <span class="stat-trend trend-up">↑ 100%</span>
                <span>可用性</span>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-header">
                <div>
                  <div class="stat-label">在线用户</div>
                  <div class="stat-value">42</div>
                </div>
                <div class="stat-icon primary">👥</div>
              </div>
              <div class="stat-footer">
                <span class="stat-trend trend-up">↑ 5.2%</span>
                <span>较昨日</span>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-header">
                <div>
                  <div class="stat-label">今日请求</div>
                  <div class="stat-value">1,246</div>
                </div>
                <div class="stat-icon warning">📈</div>
              </div>
              <div class="stat-footer">
                <span class="stat-trend trend-up">↑ 12.5%</span>
                <span>较昨日</span>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-header">
                <div>
                  <div class="stat-label">存储使用</div>
                  <div class="stat-value">68%</div>
                </div>
                <div class="stat-icon danger">💾</div>
              </div>
              <div class="stat-footer">
                <span class="stat-trend trend-up">↑ 2.3%</span>
                <span>较昨日</span>
              </div>
            </div>
          </div>

          <!-- Configuration Section -->
          <div class="card">
            <div class="panel-header">
              <h2 class="panel-title">系统配置</h2>
              <button class="btn btn-primary" @click="saveConfiguration">
                保存配置
              </button>
            </div>
            
            <div class="config-section">
              <h3>基础设置</h3>
              <div class="form-group">
                <label class="form-label">系统名称</label>
                <input 
                  type="text" 
                  class="form-input" 
                  v-model="config.systemName"
                  placeholder="请输入系统名称"
                />
              </div>
              
              <div class="form-group">
                <label class="form-label">系统描述</label>
                <textarea 
                  class="form-input" 
                  v-model="config.systemDescription"
                  placeholder="请输入系统描述"
                  rows="3"
                ></textarea>
              </div>
              
              <div class="form-group">
                <label class="form-label">默认语言</label>
                <select class="form-input" v-model="config.defaultLanguage">
                  <option value="zh-CN">中文 (简体)</option>
                  <option value="en-US">English (US)</option>
                </select>
              </div>
            </div>
            
            <div class="config-section">
              <h3>AI模型设置</h3>
              <div class="form-group">
                <label class="form-label">默认模型</label>
                <select class="form-input" v-model="config.defaultModel">
                  <option value="gpt-4">GPT-4</option>
                  <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
                  <option value="llama2">Llama 2</option>
                  <option value="claude">Claude</option>
                </select>
              </div>
              
              <div class="form-group">
                <label class="form-label">最大上下文长度</label>
                <input 
                  type="number" 
                  class="form-input" 
                  v-model="config.maxContextLength"
                  min="1000"
                  max="100000"
                />
              </div>
              
              <div class="form-group">
                <label class="form-label">温度参数</label>
                <input 
                  type="range" 
                  class="form-input" 
                  v-model="config.temperature"
                  min="0"
                  max="1"
                  step="0.1"
                />
                <div class="range-value">{{ config.temperature }}</div>
              </div>
            </div>
            
            <div class="config-section">
              <h3>安全设置</h3>
              <div class="form-group">
                <label class="form-label checkbox-label">
                  <input 
                    type="checkbox" 
                    v-model="config.enable2FA"
                  /> 启用两步验证
                </label>
              </div>
              
              <div class="form-group">
                <label class="form-label checkbox-label">
                  <input 
                    type="checkbox" 
                    v-model="config.enableSessionTimeout"
                  /> 启用会话超时
                </label>
              </div>
              
              <div class="form-group" v-if="config.enableSessionTimeout">
                <label class="form-label">会话超时时间 (分钟)</label>
                <input 
                  type="number" 
                  class="form-input" 
                  v-model="config.sessionTimeout"
                  min="1"
                  max="1440"
                />
              </div>
            </div>
          </div>
        </section>

        <!-- Right Panel -->
        <aside class="right-panel">
          <div class="panel-card">
            <div class="panel-header">
              <h3 class="panel-title">系统信息</h3>
            </div>
            <div class="system-info">
              <div class="info-item">
                <span class="info-label">版本</span>
                <span class="info-value">v2.1.4</span>
              </div>
              <div class="info-item">
                <span class="info-label">运行时间</span>
                <span class="info-value">15天 6小时</span>
              </div>
              <div class="info-item">
                <span class="info-label">操作系统</span>
                <span class="info-value">Ubuntu 20.04</span>
              </div>
              <div class="info-item">
                <span class="info-label">内存使用</span>
                <span class="info-value">4.2 GB / 8 GB</span>
              </div>
              <div class="info-item">
                <span class="info-label">CPU使用率</span>
                <span class="info-value">32%</span>
              </div>
              <div class="info-item">
                <span class="info-label">磁盘空间</span>
                <span class="info-value">128 GB / 256 GB</span>
              </div>
            </div>
          </div>
          
          <div class="panel-card">
            <div class="panel-header">
              <h3 class="panel-title">最近活动</h3>
            </div>
            <div class="activity-list">
              <div class="activity-item">
                <div class="activity-icon">🔧</div>
                <div class="activity-content">
                  <div class="activity-text">更新了系统配置</div>
                  <div class="activity-user">Admin</div>
                  <div class="activity-time">10分钟前</div>
                </div>
              </div>
              <div class="activity-item">
                <div class="activity-icon">👤</div>
                <div class="activity-content">
                  <div class="activity-text">添加了新用户</div>
                  <div class="activity-user">Manager</div>
                  <div class="activity-time">1小时前</div>
                </div>
              </div>
              <div class="activity-item">
                <div class="activity-icon">🔒</div>
                <div class="activity-content">
                  <div class="activity-text">修改了权限设置</div>
                  <div class="activity-user">Admin</div>
                  <div class="activity-time">3小时前</div>
                </div>
              </div>
              <div class="activity-item">
                <div class="activity-icon">🔄</div>
                <div class="activity-content">
                  <div class="activity-text">系统重启完成</div>
                  <div class="activity-user">System</div>
                  <div class="activity-time">1天前</div>
                </div>
              </div>
            </div>
          </div>
        </aside>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'SystemManagement',
  data() {
    return {
      config: {
        systemName: 'FinanceAI',
        systemDescription: '智能金融问答与分析系统',
        defaultLanguage: 'zh-CN',
        defaultModel: 'gpt-4',
        maxContextLength: 8192,
        temperature: 0.7,
        enable2FA: true,
        enableSessionTimeout: true,
        sessionTimeout: 30
      }
    };
  },
  methods: {
    saveConfiguration() {
      // 模拟保存配置
      console.log('Saving configuration:', this.config);
      
      // 显示保存成功的提示
      alert('配置已保存成功！');
    }
  }
};
</script>

<style scoped>
.app-container {
  min-height: 100vh;
  background: var(--light-bg);
}

/* Header and Navigation */
header {
  background: white;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 1000;
}

nav {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
}

.nav-left {
  display: flex;
  align-items: center;
  gap: 3rem;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary-color), #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.nav-menu {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-menu a {
  text-decoration: none;
  color: var(--dark-color);
  font-weight: 500;
  position: relative;
  transition: color 0.3s ease;
}

.nav-menu a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
  width: 100%;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.notification-btn {
  position: relative;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: var(--dark-color);
}

.notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: var(--danger-color);
  color: white;
  font-size: 0.7rem;
  padding: 2px 5px;
  border-radius: 10px;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--light-bg);
  border-radius: 25px;
  cursor: pointer;
}

.user-avatar {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, var(--primary-color), #764ba2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

/* Main Content */
.main-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 2rem;
}

.page-header h1 {
  font-size: 2rem;
  color: var(--dark-color);
  margin-bottom: 0.5rem;
}

.page-header p {
  color: #6c757d;
  font-size: 1rem;
}

.content-wrapper {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  gap: 2rem;
  margin-top: 2rem;
}

/* Sidebar */
.sidebar {
  background: white;
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
  height: fit-content;
  position: sticky;
  top: 90px;
}

.sidebar-section {
  margin-bottom: 2rem;
}

.sidebar-section:last-child {
  margin-bottom: 0;
}

.sidebar-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  color: var(--dark-color);
}

.menu-item:hover {
  background: var(--light-bg);
  transform: translateX(5px);
}

.menu-item.active {
  background: linear-gradient(135deg, var(--primary-color), #764ba2);
  color: white;
}

.menu-icon {
  width: 20px;
  text-align: center;
}

/* Statistics Cards */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.stat-card {
  background: white;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
  transition: transform 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-5px);
}

.stat-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
}

.stat-label {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  color: var(--dark-color);
}

.stat-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.stat-icon.primary {
  background: rgba(74, 144, 226, 0.1);
  color: var(--primary-color);
}

.stat-icon.success {
  background: rgba(92, 184, 92, 0.1);
  color: var(--secondary-color);
}

.stat-icon.warning {
  background: rgba(240, 173, 78, 0.1);
  color: var(--warning-color);
}

.stat-icon.danger {
  background: rgba(217, 83, 79, 0.1);
  color: var(--danger-color);
}

.stat-footer {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-color);
  font-size: 0.85rem;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 600;
}

.trend-up {
  color: var(--secondary-color);
}

.trend-down {
  color: var(--danger-color);
}

/* Main Content Area */
.main-content {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.panel-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dark-color);
}

.config-section {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border-color);
}

.config-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.config-section h3 {
  margin-bottom: 1rem;
  color: var(--dark-color);
}

.range-value {
  margin-top: 0.5rem;
  text-align: center;
  font-weight: 500;
}

/* Right Panel */
.right-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.panel-card {
  background: white;
  border-radius: 20px;
  padding: 1.5rem;
  box-shadow: var(--shadow);
}

.panel-card .panel-header {
  margin-bottom: 1rem;
}

.panel-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--dark-color);
}

.system-info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.info-item {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-color);
}

.info-item:last-child {
  border-bottom: none;
}

.info-label {
  color: #6c757d;
}

.info-value {
  font-weight: 500;
  color: var(--dark-color);
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.activity-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem;
  border-radius: 10px;
  transition: background 0.3s ease;
}

.activity-item:hover {
  background: var(--light-bg);
}

.activity-icon {
  font-size: 1.2rem;
}

.activity-content {
  flex: 1;
}

.activity-text {
  font-size: 0.95rem;
  color: var(--dark-color);
  margin-bottom: 0.25rem;
}

.activity-user {
  font-size: 0.85rem;
  color: var(--primary-color);
  font-weight: 500;
  margin-bottom: 0.25rem;
}

.activity-time {
  font-size: 0.8rem;
  color: #6c757d;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }
  
  .sidebar {
    display: none;
  }
  
  .right-panel {
    display: none;
  }
}

@media (max-width: 768px) {
  .nav-menu {
    display: none;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .panel-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
}
</style>
